<template>
  <div class="myconten">
    <el-descriptions
      title="我的详细资料"
      :column="1"
      border
    >
      <el-descriptions-item
        label="用户名"
        label-align="left"
        align="left"
        label-class-name="my-label"
        class-name="my-content"
        width="150px"
      >{{datas.username}} </el-descriptions-item>
      <el-descriptions-item
        label="真实姓名"
        label-align="left"
        align="left"
      >{{datas.realname}} </el-descriptions-item>
      <el-descriptions-item
        label="电话"
        label-align="left"
        align="left"
      >{{datas.phone}} </el-descriptions-item>
      <el-descriptions-item
        label="最近登陆时间"
        label-align="left"
        align="left"
      >
        {{datas.gmtLastLogin}}
      </el-descriptions-item>
      <el-descriptions-item
        label="角色"
        label-align="left"
        align="left"
      >{{datas.roles}} </el-descriptions-item>
      <el-descriptions-item
        label="状态"
        label-align="left"
        align="left"
      >
        <el-button type="primary">{{datas.status? '正常':'异常'}}</el-button>
      </el-descriptions-item>
    </el-descriptions>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["datas"]),
  },
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.myconten {
  margin: 15px 20px;
}
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>
